<template>
  <div class="login-container">
    <header class="header">

        <span class="loginLogo"></span>
     <!--
        <span><a target="_blank" href="#" class="help-center">帮助中心</a></span>
      -->
    </header>
    <div class="content">
         <h3 class="title">容器云平台</h3>
        <!-- <h3 class="title">微云云桌面服务器管理软件</h3>-->

        <div class="picIcon"></div>
        <div class="loginRight">
            <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px" class="card-box login-form">
                <el-form-item prop="loginName">
                    <span class="svg-container">
                    <icon-svg icon-class="xinrenzhinan"></icon-svg>
                    </span>
                    <el-input name="loginName" type="text" v-model="loginForm.loginName" ref="loginName" autoComplete="on" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item prop="loginPassword">
                    <span class="svg-container">
                    <icon-svg icon-class="mima"></icon-svg>
                    </span>
                    <el-input name="loginPassword" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.loginPassword" autoComplete="on" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
                    登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!--
    <footer class="footer">
      <span>备案号</span> |
      <span>公司相关信息</span>
    </footer>
    -->
  </div>
</template>

<script>
    import {
        isWscnEmail
    } from '@/utils/validate';
    import {
        projectConfig
    } from '@/utils/projectConfig'

    export default {
        name: 'login',
        data() {
            const validateEmail = (rule, value, callback) => {
                if (value.length < 1) {
                    callback(new Error('请输入账号'));
                } else {
                    // 进行用户账号验证
                    // 在配置文件中得到接口url
                    const checkLoginName_url = projectConfig.URL_API_USER_VALIDATE_ACCOUNT;
                    // 请求参数
                    const checkLoginName_param = {
                        loginName: value
                    };
                    // 发起请求
                    this.httpClient.httpClientPost(checkLoginName_url, checkLoginName_param).then(function(response) {
                        // 返回处理,code 放在data里面
                        const code = response.data;
                        if (code == projectConfig.CODE_ACCOUNT_NOT_FOUND) {
                            // 状态码701,表示登录账号不存在
                            callback(new Error('登陆账号不存在'));
                        } else {
                            callback();
                        }
                    });
                }
            };
            const validatePass = (rule, value, callback) => {
                if (value.length < 6) {
                    callback(new Error('密码不能小于6位'));
                } else {
                    if (this.$refs.loginName.value.length < 1) {
                        callback(new Error('密码错误'));
                    } else {
                        // 进行用户密码验证
                        // 在配置文件中的到接口url
                        const checkLoginPassword_url = projectConfig.URL_API_USER_VALIDATE_PASSWORD;
                        // 请求参数
                        const checkLoginPassword_param = {
                            loginName: this.$refs.loginName.value,
                            loginPassword: value
                        };
                        // 发起请求
                        this.httpClient.httpClientPost(checkLoginPassword_url, checkLoginPassword_param).then(function(response) {
                            // 返回处理,code放在data里面
                            // const code = response.meta.code;
                            const code = response.data;
                            if (code == projectConfig.CODE_PASSWORD_NOT_FOUND) {
                                // 状态码为702,表示密码找不到
                                callback(new Error('密码错误'));
                            } else {
                                callback();
                            }
                        });
                    }
                }
            };
            return {
                hasParaLogin:false,
                loginForm: {
                    loginName: '',
                    loginPassword: ''
                },
                loginRules: {
                    loginName: [{
                        required: true,
                        trigger: 'blur',
                        validator: validateEmail
                    }],
                    loginPassword: [{
                        required: true,
                        trigger: 'blur',
                        validator: validatePass
                    }]
                },
                loading: false
            }
        },
        mounted:function(){
            // let uName=this.$route.query.uName;
            // let uPwd=this.$route.query.uPwd;
            // if(uName!=undefined&&uPwd!=undefined){
            //     this.hasParaLogin=true;
            //     this.loginForm.loginName=uName;
            //     this.loginForm.loginPassword=uPwd;
            //     this.handleLogin();
            // }
        },
        methods: {
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if(this.hasParaLogin){
                        valid=true;
                    }
                    if (valid) {
                        // 点击,登录按钮,验证通过,请求登录
                        // 这里是用vuex的dispatch,触发Login action,
                        // /src/store/modules/user.js 这个文件配置了action的动作,以及登录成功后存储token
                        this.loading = true;
                        // 操作审计
                        //this.userBaseInfo.setOperObjectName(this.loginForm.loginName);
                        this.userBaseInfo.setOperObjectName(this.loginForm.loginName);
                        this.$store.dispatch('Login', this.loginForm).then(() => {
                            this.loading = false;
                            this.$router.push({
                                path: '/'
                            });
                        }).catch(() => {
                            this.loading = false;
                        });
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    @import "src/styles/mixin.scss";
    .tips {
        font-size: 14px;
        color: #999;
        margin-bottom: 5px;
    }

    .login-container {
        @include relative;
        height: 100vh;
        background: url(../../assets/images/login-bg03.png) 50% 50%/cover no-repeat fixed;
        background-size: 100% 100%;
        background-color: #fff;
        width: 100%;
        position: absolute;
        .header {
            width: 100%;
            height: 34px;
            line-height: 34px;
            background: rgba(176, 174, 173, 0.25);

        }
        .loginLogo{
          width:105px;
          height: 30px;
          background: url(../../assets/images/logo.png);
          background-size: 105px 30px;
        }
        .header span {
            font-size: 14px;
            color:#666;
        }
        .header span:nth-of-type(1) {
            position: absolute;
            left: 2%;
        }
        .header span:nth-of-type(2) {
            position: absolute;
            right: 2%;
            top:1px;
        }
        .el-icon-message:before{
            margin-right:6px;
        }
        .header span {
            color:#c6c6c6;
        }
        .help-center{
            background: url(../../assets/images/help-center.png) no-repeat left center;
            padding-left:16px;
            background-size:14px 14px;
        }
        .content{
            width:100%;
            height:400px;
            background: url(../../assets/images/bg-center.png) no-repeat;
            background-size:100% 400px;
            position: relative;
            margin-top:66px;
            z-index:99;
        }
        .picIcon{
            width:44%;
            height: 220px;
            background: url(../../assets/images/222.png) no-repeat center right;
            float: left;
            background-size: 263px 220px;
            margin-top: 140px;
        }
        input {
            border: 0px;
            -webkit-appearance: none;
            border-radius: 0px;
            color: #999;
            width:100%;
            height: 47px;
            background:none;
        }
        input:-webkit-autofill{
            background-color:#fff !important;
            background-image: none;
            color:#fff;
        }
        .el-input {
            display: inline-block;
            height: 47px;
            padding-left:42px;
            border-radius: 4px;
            text-align:right;
            box-sizing:border-box;
        }
        .svg-container {
            padding: 6px 5px 6px 15px;
            color: #fff;
            position: absolute;
            left: 0;
            top:0;
        }
        .title {
            font-size:1.6rem;
            font-weight:200;
            color: #d7d4d4;
            font-weight: bold;
            margin-top: -10px;
            position: absolute;
            top: 0;
            left:-22px;
            right: 0;
            text-align: center;
        }
        .loginRight{
            float: right;
            width:50%;
            text-align:left;
        }
        .login-form {
            width:240px;
            margin-top: 178px;
        }
        .el-form-item {
           // border: 1px solid #ccc;
            border-radius:2px;
            color: #fff;
            background:#ffffff29;
        }
        .forget-pwd {
            color: #fff;
        }
        .el-button--primary {
            background: #0ba2d3;
            color: #fff;
            height:40px;
        }
        .el-button--primary:hover {
            background: #20a0ff;
            border: 1px solid #20a0ff;
            color: #fff;
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        height: 34px;
        background:rgba(176, 174, 173, 0.25);
        line-height: 34px;
        color:#b8b6b6;
        font-size: 14px;
    }
</style>
